<template>
  <!-- 申请管理 -->
  <div class="apply">
    <div class="apply-top">
      <div class="apply-top-title">申请管理</div>
      <div class="apply-top-search">
        <el-form size="small" :inline="true" :model="formQuery.form">
          <el-form-item label="申请人">
            <el-input v-model.trim="formQuery.form.apply_user" placeholder="请输入" maxLength="40" clearable></el-input>
          </el-form-item>
          <el-form-item label="申请类型">
            <el-select v-model="formQuery.form.type" clearable>
              <el-option
                v-for="(item, index) in formQuery.applyTypeList"
                :key="index"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formQuery.form.status" clearable>
              <el-option
                v-for="(item, index) in formQuery.applyStateList"
                :key="index"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="apply-top-search-btn">
          <el-button class="search-btn-res" @click="formQuery.clickReset()">重置</el-button>
          <el-button class="search-btn-sear" type="primary" @click="formQuery.clickSearch()">查询</el-button>
        </div>
      </div>
    </div>
    <div class="apply-con">
      <div class="apply-con-opera">
        <el-button class="apply-con-opera-btn" @click="clickExport()">导出数据</el-button>
      </div>
      <!-- 表格 -->
      <comTable
        :loading="loading"
        :tableData="tableData"
        :listCount="total"
        :pageSize="pageSize"
        :currentPage="currentPage"
        :userColumn="tableColumns()"
        @updatePage="handleCurrentChange"
        @sizePage="handleSizeChange"
      >
        <template #id>
          <el-table-column label="序号" minWidth="80">
            <template #default="scope">
              <p class="table-idx">
                <span v-if="scope.row.status === 0"></span>
                <i>{{ scope.row.id }}</i>
              </p>
            </template>
          </el-table-column>
        </template>
        <template #type_name>
          <el-table-column label="申请类型" minWidth="100">
            <template #default="scope">
              <span class="table-type" :class="classStyle[scope.row.type]">
                {{ scope.row.type_name }}
              </span>
            </template>
          </el-table-column>
        </template>
        <template #status>
          <el-table-column label="状态" minWidth="80">
            <template #default="scope">
              <p class="table-state">
                <span
                  v-if="scope.row.status !== 0"
                  :style="scope.row.status === 1 ? 'background:#2fb083' : 'background:#FF2A00;'"
                ></span>
                <i
                  :style="
                    scope.row.status === 0 ? 'color:#333' : scope.row.status === 1 ? 'color:#2fb083' : 'color:#FF2A00;'
                  "
                  >{{ scope.row.status === 0 ? '待审核' : scope.row.status === 1 ? '已通过' : '已驳回' }}</i
                >
              </p>
            </template>
          </el-table-column>
        </template>
        <template #action>
          <el-table-column label="操作" minWidth="80">
            <template #default="scope">
              <span style="color: #1182fb; padding: 0 10px; cursor: pointer" @click="clickDetail(scope.row)">详情</span>
              <span style="color: #ff2a00; padding: 0 10px; cursor: pointer" @click="clickDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </template>
      </comTable>
    </div>
    <!-- 详情弹窗 -->
    <detailDialog
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :applyId="applyId"
      @closeDialog="closeDialog"
      @clickReject="clickReject"
      @clickPast="clickPast"
    ></detailDialog>
    <!-- 删除确认 -->
    <div class="delete">
      <el-dialog v-model="deleteVisible" :modal="false" width="20%" draggable>
        <span>删除之后要无法撤销，确定要删除吗？ </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="deleteVisible = false" style="margin-right: 20px">取消</el-button>
            <el-button type="primary" @click="deleteConfirm">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted} from 'vue';
import {ElMessage} from 'element-plus';
import axios from 'axios';
import manageApi from '@/api/manage.ts';
import comTable from '@/components/comTable/index.vue';
import detailDialog from './components/index.vue';
import store from '@/store';

const classStyle = {
  user_register: 'table-style2',
  unit_register: 'table-style1',
  change_unit: 'table-style4',
  reset_unit_password: 'table-style3',
};

// 查询相关
const formQuery = reactive({
  form: {},
  applyTypeList: [
    {
      key: '用户注册',
      value: 'user_register ',
    },
    {
      key: '单位注册',
      value: 'unit_register',
    },
    {
      key: '单位变更',
      value: 'change_unit',
    },
    {
      key: '密码重置',
      value: 'reset_unit_password',
    },
  ],
  applyStateList: [
    {
      key: '待审核',
      value: '0',
    },
    {
      key: '已通过',
      value: '1',
    },
    {
      key: '已驳回',
      value: '-1',
    },
  ],
  // 查询
  clickSearch: () => {
    getTbaleDate(formQuery.form);
  },
  // 重置
  clickReset: () => {
    formQuery.form = {
      apply_user: '',
      type: '',
      status: '',
    };
    getTbaleDate();
  },
});

const tableData = ref([]);
const loading = ref(false);
const total = ref(0);
const pageSize = ref(0);
const currentPage = ref(1);

const dialogVisible = ref(false); // 详情弹窗
const applyId = ref('');
const id = ref<number>();
const deleteVisible = ref(false);

// 导出
const clickExport = async () => {
  const exportUrl = `${import.meta.env.VITE_API_URL}/api/apply/export`;
  const data = await axios({
    method: 'get',
    url: exportUrl,
    headers: {
      token: localStorage.getItem('token'),
    },
    params: formQuery.form,
    responseType: 'blob',
  });
  const url = window.URL.createObjectURL(new Blob([data.data]));
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', '申请列表.xlsx');
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href); // 释放URL 对象
  document.body.removeChild(link);
  link = null;
};
// 翻页
const handleSizeChange = (e: any) => {
  pageSize.value = e.pageSize;
  getTbaleDate({per_page: pageSize.value, ...formQuery.form});
};
const handleCurrentChange = (e: any) => {
  currentPage.value = e.currentPage;
  getTbaleDate({page: currentPage.value, per_page: pageSize.value, ...formQuery.form});
};
// 详情
const clickDetail = (item: any) => {
  dialogVisible.value = !dialogVisible.value;
  applyId.value = item.id.toString();
};
// 删除
const clickDelete = (item: any) => {
  id.value = item.id;
  deleteVisible.value = !deleteVisible.value;
};
const deleteConfirm = () => {
  manageApi
    .applyDelete({id: id.value})
    .then((res) => {
      if (res.status === 0) {
        ElMessage.success(res.message);
        getTbaleDate({page: currentPage.value, per_page: pageSize.value, ...formQuery.form});
        deleteVisible.value = !deleteVisible.value;
      }
    })
    .catch((err) => {
      throw err;
    });
};
// 关闭
const closeDialog = () => {
  dialogVisible.value = !dialogVisible.value;
};
// 驳回
const clickReject = () => {
  dialogVisible.value = !dialogVisible.value;
  store.dispatch('getUnprocessNum');
  getTbaleDate({page: currentPage.value, per_page: pageSize.value, ...formQuery.form});
};
// 通过
const clickPast = () => {
  dialogVisible.value = !dialogVisible.value;
  store.dispatch('getUnprocessNum');
  getTbaleDate({page: currentPage.value, per_page: pageSize.value, ...formQuery.form});
};

// 获取表格数据
const getTbaleDate = (params) => {
  loading.value = true;
  manageApi
    .getApplyList(params)
    .then((res) => {
      if (res.status === 0) {
        tableData.value = res.data.data;
        total.value = res.data.total;
        pageSize.value = res.data.per_page;
        currentPage.value = res.data.current_page;
        store.dispatch('getUnprocessNum');
        loading.value = false;
      }
    })
    .catch((err) => {
      throw err;
    });
};
onMounted(() => {
  getTbaleDate();
});
// 表格表头
const tableColumns = () => [
  {
    prop: 'id',
    label: '序号',
    slot: 'id',
  },
  {
    prop: 'apply_user',
    label: '申请人',
    minWidth: 100,
  },
  {
    prop: 'apply_mobile',
    label: '申请人电话',
    minWidth: 150,
  },
  {
    prop: 'type_name',
    label: '申请类型',
    slot: 'type_name',
  },
  {
    prop: 'created_at',
    label: '申请时间',
    minWidth: 160,
  },
  {
    prop: 'status',
    label: '状态',
    slot: 'status',
  },
  {
    prop: 'action',
    label: '操作',
    slot: 'action',
  },
];
</script>
<style lang="scss" scoped>
.apply {
  width: 100%;
  height: 100%;
  background: #f1f1f1;
  padding-left: 29px;
  padding-top: 20px;
  box-sizing: border-box;
  &-top {
    width: 100%;
    height: 125px;
    background: #fff;
    overflow: hidden;
    &-title {
      margin: 20px 0 20px 30px;
      height: 28px;
      font-size: 18px;
      color: #999999;
      line-height: 28px;
    }
    &-search {
      display: flex;
      justify-content: space-between;
      padding-right: 41px;
      padding-left: 30px;
      &:deep(.el-form-item) {
        margin-right: 40px !important;
      }
    }
  }
  &-con {
    width: 100%;
    height: 82%;
    margin-top: 14px;
    background: #fff;
    overflow: hidden;
    padding: 0 30px;
    box-sizing: border-box;
    .new-table {
      height: 90% !important;
    }
    &-opera {
      display: flex;
      justify-content: end;
      margin-top: 30px;
      margin-right: 30px;
      &-btn {
        margin-bottom: 30px;
        border-radius: 2px;
        border: 1px solid #1890ff;
        color: #1890ff;
      }
    }
    .table-idx {
      color: #4c96ff;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background: #ff5d3e;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      }
      i {
        font-style: normal;
        margin: 0 28px;
      }
    }
    .table-type {
      display: inline-block;
      height: 24px;
      border-radius: 12px;
      text-align: center;
      line-height: 24px;
      padding: 0 13px;
    }
    .table-style1 {
      color: #0fcf7e;
      background: #ecf7f2;
    }
    .table-style2 {
      color: #007aff;
      background: #deedfe;
    }
    .table-style3 {
      color: #ff924f;
      background: #ffece1;
    }
    .table-style4 {
      color: #ff5e89;
      background: #ffeff2;
    }
    .table-state {
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      }
      i {
        font-style: normal;
        margin: 0 12px;
      }
    }
  }
  .delete {
    &:deep(.el-dialog__body) {
      padding: 24px !important;
    }
  }
}
</style>
